<!-- 维保工单详情 -->
<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block style="color: ##777777;font-size: 48rpx;" slot="content">维保工单详情</block>
		</cu-custom>
		<view class="content">
			<ul>
				<li>
					<text>隐患图片：</text>
					<image :src="img"></image>
				</li>
				<li>
					<text>隐患名称：{{yhmc}}</text>
				</li>
				<li>
					<text>设备名称：{{sbmc}}</text>
				</li>
				<li>
					<text>执行时间：{{time}}</text>
				</li>
				<li>
					<text>业主名称：{{yzmc}}</text>
				</li>
				<li>
					<text>故障描述：{{gzms}}</text>
				</li>
				<li>
					<text>所属区域：{{ssqy}}</text>
				</li>
				<li>
					<text>隐患地址：{{yhdz}}</text>
				</li>
			</ul>
		</view>



		<view v-if="status == 1 " class="flex btns-group">
			<button class="my-btn-grpup" @click="qrsd">确认收到</button>
			<button class="my-btn-grpup" @click="gdth">工单退回</button>
		</view>

		<view v-show="status == 2" class="padding flex flex-direction">
			<button class="cu-btn margin-tb-sm lg my-btn" @click="qrsdyh">到场确认</button>
		</view>

		<view v-if="status == 3 || status == 9 " class="flex btns-group">
			<button class="my-btn-grpup" @click="xccz">现场处置</button>
			<button class="my-btn-grpup" @click="fkzgsj">反馈整改时间</button>
			<button class="my-btn-grpup" @click="gtgdxq">沟通工单需求</button>
			<button class="my-btn-grpup" @click="gdth">隐患退回</button>
		</view>

		<view v-if="status == 5 || status == 9">
			<view class="cu-bar bg-white margin-top my-flag">
				<view class="action">
					完成照片
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
						:data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>

			<view class="padding flex flex-direction">
				<button class="cu-btn margin-tb-sm lg my-btn" @click="submit">上传完成照片</button>
			</view>
		</view> 
	</view>
</template>

<script>
	import * as constants from '@/common/config.js';
	export default {
		data() {
			return {
				img: 'http://5b0988e595225.cdn.sohucs.com/images/20180803/5a1baccb0c7d4318b7226e52a1f3fe04.jpeg',
				yhmc: '隐患名称',
				sbmc: '',
				time: '',
				yzmc: '',
				gzms: '',
				ssqy: '',
				yhdz: '',
				imgList: [],
				ucId: '',
				status: ''
			}
		},
		onLoad(option) {
			this.ucId = option.ucId
			this.xq()
		},
		methods: {
			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '维保图片',
					content: '确定要删除维保图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			submit() {
				console.info('--->' + this.imgList.length)
				let app = getApp()
				let token = app.globalData.getToken('authorization')
				// 点击上传后循环调用uni.uploadFile ，因微信小程序只支持单文件上传
				this.imgList.forEach(ele => {
					// ele.forEach(item => {

					// })
					uni.uploadFile({
						url: constants.API + 'wx/common/upload',
						filePath: ele,
						header: {
							"authorization": token
						},
						name: 'file',
						success: (uploadFileRes) => {
							let imgObj = JSON.parse(uploadFileRes.data)
							// submit
							let params = {
								"ucId": this.ucId,
								"completeUrl": imgObj.data
							}
							// 生成报警信息
							let app = getApp()
							app.globalData.request({
								url: 'wx/workOrder/confirmEndChangeStatus',
								data: {
									...params
								}
							}).then(function(res) {
								if (res.data.code == 0) {
									uni.showToast({
										title: "操作成功",
										icon: 'success'
									})
									uni.navigateBack({
										delta: 1
									})
								}
							}).catch(function(e) {})
						}
					});
				})
			},
			qrsdyh() {
				
				let that = this
				let params = {
					"ucId": that.ucId
				}
				let app = getApp()
				app.globalData.request({
					url: 'wx/workOrder/startChangeStatus',
					data: {
						...params
					}
				}).then(function(res) {
					that.xq()
				}).catch(function(e) {})
			},
			qrsd() {
				let that = this
				let params = {
					"ucId": that.ucId
				}
				let app = getApp()
				app.globalData.request({
					url: 'wx/workOrder/confirmWorkOrder',
					data: {
						...params
					}
				}).then(function(res) {
					that.xq()
				}).catch(function(e) {})
				
			},
			// 现场处置
			xccz() {
				let that = this
				// ok
				let params = {
					"ucId": that.ucId
				}
				let app = getApp()
				app.globalData.request({
					url: 'wx/workOrder/directDisposal',
					data: {
						...params
					}
				}).then(function(res) {
					that.xq()
				}).catch(function(e) {})

			},
			fkzgsj() {
				// ok
				uni.navigateTo({
					url: '../fkzg/fkzg?ucId=' + this.ucId
				});
			},
			gtgdxq() {
				// ok
				uni.navigateTo({
					url: '../gtgdxq/gtgdxq?ucId=' + this.ucId
				});
			},
			gdth() {
				// ok
				let params = {
					"ucId": this.ucId
				}
				let app = getApp()
				app.globalData.request({
					url: 'wx/workOrder/workOrderReturn',
					data: {
						...params
					}
				}).then(function(res) {
					if (res.data.code == 0) {
						uni.showToast({
							title: res.data.msg,
							icon: 'success'
						})
					}
					uni.navigateBack({
						delta: 1
					});
				}).catch(function(e) {})
			},
			xq() {
				// 封装参数
				let params = {
					"ucId": this.ucId
				}
				let that = this
				// 请求数据
				let app = getApp()
				app.globalData.request({
					url: 'wx/workOrder/getInWorkOrderVo',
					data: {
						...params
					}
				}).then(function(res) {
					console.info(res)
					that.img = res.data.data.abnormalPic
					that.yhmc = res.data.data.name
					that.sbmc = res.data.data.name
					that.time = res.data.data.reportTime
					that.yzmc = res.data.data.enterpriseName
					that.gzms = res.data.data.name
					that.ssqy = res.data.data.regionName
					that.yhdz = res.data.data.name
					that.status = res.data.data.status

				}).catch(function(e) {

				})
			}
		}
	}
</script>

<style scoped>
	page {
		width: 100vw;
		position: relative;
	}

	.content {
		margin-top: 24rpx;
		background-color: #FFFFFF;
	}

	li {
		height: 94rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		position: relative;
	}

	ul li:first-child {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		position: relative;
		align-items: center;
		padding: 25rpx 0;
	}

	li image {
		display: block;
		width: 180px;
		height: 180px;
		margin-right: 20px;
	}

	li text {
		font-size: 24rpx;
		color: #777777;
		letter-spacing: 0.39px;
		line-height: 94rpx;
	}

	li::after {
		content: ''; // 必须
		position: absolute;
		left: 2rpx;
		bottom: 0;
		right: 2rpx;
		height: 1px;
		background-color: #dcdcdc;
	}

	.my-btn {
		height: 94rpx;
		background-image: linear-gradient(90deg, #FAB53A 4%, #EFA21A 99%);
		box-shadow: 0 0 12px 0 rgba(250, 181, 58, 0.50);
		border-radius: 24px;
		ont-family: PingFangSC-Medium;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
	}

	.my-btn-grpup {
		height: 160rpx;
		line-height: 160rpx;
		vertical-align: middle;
		text-align: center;
	}

	.btns-group {
		width: 100%;
		position: absolute;
		bottom: 0;
		text-align: center;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}

	.btns-group button:first-child {
		background-color: #458DF5;
		color: #FFFFFF;
		flex: 1;
		font-size: 36rpx;
		outline: none;
		border: none;
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		border-radius: 0;
		border-top-left-radius: 16px;
	}

	.btns-group button:nth-child(2) {
		background-color: #54BE7A;
		color: #FFFFFF;
		flex: 1;
		font-size: 36rpx;
		outline: none;
		border: none;
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		border-radius: 0;
	}

	.btns-group button:last-child {
		background-color: #FABD50;
		flex: 1;
		color: #FFFFFF;
		font-size: 36rpx;
		outline: none;
		border: none;
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		border-radius: 0;
		border-top-right-radius: 16px;
	}

	.my-flag {
		position: relative;
	}

	.action::before {
		position: absolute;
		left: 18rpx;
		width: 6rpx;
		height: 32rpx;
		content: '';
		background: #FAB539;

	}
</style>
